<!--
 * @Des: 表单发起
 * @Author: jin_yc
 * @Date: 2019-11-08 10:21:45
 * @LastEditor: jin_yc
 * @LastEditTime: 2021-12-21 10:00:06
 -->
<template>
  <div
    style="height: 100%;"
    class="form-init-container"
  >
    <div class="left-container">
      <div class="side-tree">
        <div class="content">
          <!-- <div class="header">{{'所属模块'}}</div> -->
          <fks-tree
            default-expand-all
            :expand-on-click-node="false"
            :data="em_form_category"
            node-key="id"
            :props="defaultProps"
            show-icon
            @node-click="treeCheckHandler"
            @check-change="treeCheckHandler"
          >
            <template slot-scope="{ node, data }">
              <span v-if="data.type == 'all'">{{ data.label }}</span>
              <span v-else>{{
                data.code | transferEnum('em_form_category')
              }}</span>
            </template>
          </fks-tree>
        </div>
      </div>
    </div>
    <div class="right-container">
      <div style="height: 100%;">
        <fks-query-page
          v-loading="loading"
          :element-loading-text="LANG.LOADING"
          :data="tableData"
          highlight-current-row
          :total="total"
          :table-name="LANG.FORM"
          :current-page.sync="currentPage"
          :page-sizes="[15, 20, 50, 100]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @query="getData"
        >
          <template slot="singleSearch">
            <div class="single-searchBox">
              <fks-input
                v-model="formName"
                size
                :placeholder="LANG.FORM_NAME"
                class="single-searchBox-item"
                clearable
                @keyup.enter.native="getData"
              >
                <fks-button
                  slot="append"
                  icon="fks-icon-search"
                  @click="getData"
                />
              </fks-input>
            </div>
          </template>
          <template>
            <fks-table-column
              type="index"
              align="center"
              label="#"
            />
            <fks-table-column
              align="left"
              header-align="center"
              is-link
              prop="formName"
              :label="LANG.FORM_NAME"
            >
              <template slot-scope="scope">
                <!-- <span
                  @click="openForm(scope.row)"
                >{{LANG[scope.row.formKey.toUpperCase()] || scope.row.formKey}}</span>-->
                <span @click="openForm(scope.row)">{{
                  scope.row.formName
                }}</span>
              </template>
            </fks-table-column>
            <!-- <fks-table-column prop="formKey" label="表单Key" align="center"></fks-table-column> -->
            <fks-table-column
              prop="formCategory"
              :label="LANG.FORM_MODULES"
              align="center"
            >
              <template slot-scope="scope">
                {{
                  scope.row.formCategory | transferEnum('em_form_category')
                }}
              </template>
            </fks-table-column>
            <!-- <fks-table-column prop="url" label="跳转链接" align="center"></fks-table-column> -->
            <fks-table-column
              prop="maintainerName"
              width="100"
              :label="LANG.FORM_MAINTAINER"
              align="center"
            />
            <fks-table-column
              prop="updateDate"
              width="170"
              :label="LANG.UPDATE_TIME"
              align="center"
            >
              <template slot-scope="scope">
                {{
                  scope.row.updateDate
                    ? $dayjs(scope.row.updateDate).format('YYYY-MM-DD HH:mm')
                    : ''
                }}
              </template>
            </fks-table-column>
          </template>
        </fks-query-page>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import { formRelsList, formRels, deleteFormRels } from '../api/flowManage'
import { ENUM } from '@/store/State/stateTypes'
// import Mix from '@/mixins/module'
export default {
  name: 'FormCenter',
  components: {},
  // mixins: [Mix],
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      loading: false,
      formKey: '',
      formName: '',
      modelKey: '',
      modelName: '',
      maintainer: '',
      formCategory: '',
      dialogVisible: false,
      dialogType: 'add',
      searchBarH: 58,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      Form: {
        description: '',
        entityName: '',
        formCategory: '',
        formKey: '',
        formName: '',
        maintainer: '',
        modelKey: '',
        modelName: '',
        url: ''
      },
      tableData: [],
      selectItem: {
        id: ''
      },
      detailData: [] // 详情列表数组
    }
  },
  computed: {
    em_form_category() {
      if (this.$store.state[ENUM].em_form_category) {
        return [
          {
            id: 0,
            type: 'all',
            label: this.$lang == 'zh-CN' ? '全部' : 'All',
            code: '',
            children: this.$store.state[ENUM].em_form_category.map((item) => {
              return {
                id: item.id,
                label: item.code,
                code: item.code
              }
            })
          }
        ]
      } else {
        return []
      }
    }
  },
  mounted() {
    this.getData(
      this.formCategory,
      this.formKey,
      this.formName,
      this.modelKey,
      this.currentPage,
      this.pageSize
    )
    //this.getCategoryItem()
  },
  methods: {
    /**
     * @description: 获取搜索栏的高度来调整页面
     * @param {height} 搜索栏高度
     */
    searchBarHeight(height) {
      this.searchBarH = height
    },
    getData() {
      this.loading = true
      formRelsList({
        formCategory: this.formCategory,
        formKey: this.formKey,
        formName: this.formName,
        modelKey: this.modelKey,
        page: this.currentPage,
        size: this.pageSize
      }).then((res) => {
        if (res.status) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
        this.loading = false
      })
    },
    clear() {
      this.formName = ''
    },
    submit() {
      let httpType = this.dialogType == 'add' ? 'post' : 'put'
      formRels(JSON.stringify(this.Form), httpType).then((res) => {
        if (res.status) {
          this.$message({
            type: 'success',
            message: this.LANG.SUMBIT_SUCCESS
          })
        }
        this.dialogVisible = false
        this.getData()
      })
    },
    /**
     * @description: 关闭弹窗
     */
    close() {
      this.dialogVisible = false
    },
    add() {
      this.dialogType = 'add'
      this.dialogVisible = true
    },
    /**
     * @description: 编辑
     * @param {row} 被编辑行数据
     */
    edit(row) {
      this.dialogType = 'edit'
      this.Form = row
      this.dialogVisible = true
    },
    /**
     * @description: 点击左侧筛选树触发的方法
     * @param {data} 选中节点
     */
    treeCheckHandler(data) {
      // this.formCategory = data.label == '全部' ? '' : data.label
      this.formCategory = data.type == 'all' ? '' : data.label
      this.getData()
    },
    /**
     * @description: 打开表单
     * @param {data} 表单数据
     */
    openForm(data) {
      if (data.formKey && data.processType === '1') {
        this.$router.push(this.$route.path + '/form/add/' + data.formKey)
      } else if (data.formKey && data.processType === '2') {
        this.$router.push(this.$route.path + '/customForm/add/' + data.formKey)
      } else {
        this.$message.warning('参数缺失！')
      }
    },
    handleSize(val) {
      this.pageSize = val
      this.getData()
    },
    handlePage(val) {
      this.currentPage = val
      this.getData()
    },
    handlePrev(val) {
      this.currentPage = val
      this.getData()
    },
    handleNext(val) {
      this.currentPage = val
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .fks-tree-node {
  font-size: 14px;
}

::v-deep .fks-tree-node.is-current > .fks-tree-node__content {
  color: var(--theme-color);
}

.remark {
  width: 100%;
  padding-left: 10px;
  border: 1px solid rgba(231, 239, 250, 1);
  border-left: 4px solid #54a0fd;
  border-radius: 4px;
  color: #606266;
  background: rgba(247, 250, 255, 1);
}

.danger-remark {
  border-left: 4px solid #f56c6c !important;
  background: rgba(255, 250, 250, 1) !important;
}

.choose-content {
  display: flex;
  justify-content: space-around;
} /* 左右布局 */
.left-container {
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  width: 284px;
  height: 100%;
  margin-right: 16px !important;
  vertical-align: top;
  // padding: 0 10px;
  // margin-right: 16px;
  background-color: #fff;

  .fks-tree {
    // background-color: rgb(241, 244, 245);
    // background-color: #fff;
    ::v-deep .fks-tree-node__label {
      width: calc(100% - 52px);
      overflow: hidden;
      font-size: 14px;
      text-overflow: ellipsis;
    }
  }

  /* 侧边树 */
  .side-tree {
    position: relative;
    height: 100%;
    padding-top: 24px;

    .content {
      position: relative;
      height: calc(100% - 102px);
      padding-right: 32px;
      padding-left: 32px;
      overflow: auto;
    }
  }
}

.right-container {
  position: relative;
  display: inline-block;
  width: calc(100% - 322px);
  min-width: 500px;
  height: 100%;
  overflow-x: auto;
  vertical-align: top;
  white-space: nowrap;

  .fks-table {
    box-sizing: content-box;
    width: 100%;
  }
  // .fks-collapse-item__header{
  //   font-size: 13px;
  //   font-weight: 500;
  //   color: #303133;
  //   cursor: pointer;
  // }
  .fks-tag {
    margin-top: 4px;
    margin-left: 8px;
  }

  .avatar {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.avatar-uploader {
  width: 320;
  height: 120px;
  margin-bottom: 22px;
  // .fks-upload
}

::v-deep .fks-upload-dragger {
  width: 106px !important;
  height: 140px !important;
  border: 1px solid #d4d9e0;
  background-color: #fafafa;

  .avatar-uploader-icon {
    display: block;
    margin: 50px 0 0;
    font-size: 24px;
    text-align: center;
    color: #c7c7c7;
  }

  span {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #c7c7c7;
  }
}

.fks-upload {
  width: 320;
  height: 120px;
  // .fks-upload
}

.avatar {
  display: block;
  width: 100%;
  height: 100%;
}
// ::v-deep深度选择器
.label {
  margin-top: 0;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #000 !important;
}

.viewAvatar {
  width: 106px !important;
  height: 140px !important;
}

.single-searchBox .single-searchBox-item {
  margin-right: 0 !important;
}

::v-deep .fks-pagination {
  padding-right: 0;
  padding-left: 0;
}
</style>
